<template>
  <div class="container">
    <div class="box box-ver h-p100">
      <div class="box-f1 of-y-s">
        <div class="total">
          <div>您本次的交通报销金额合计为</div>
          <div class="box box-ac amount">
            <div>¥&nbsp;</div>
            <input v-model="total" v-limit-money readonly class="box-f1" type="number">
          </div>
        </div>
        <div class="list">
          <div class="item box box-ver">
            <div>往返机场/车站金额</div>
            <div class="box box-ac amount">
              <div>¥&nbsp;</div>
              <input v-auto-scroll v-model="person.CFGOBACKFLY" v-limit-money class="box-f1"  type="number">
            </div>
            <div class="tips box">
              <div class="icon icon-invoice-tips"></div>
              <div class="tc-666 box-f1">
                往返机场或火车站路程所产生的出租车或快车等费用
              </div>
            </div>
          </div>
          <div class="item box box-ver">
            <div>机票/火车票/自驾费用</div>
            <div class="box box-ac amount">
              <div>¥&nbsp;</div>
              <input v-auto-scroll class="box-f1" v-limit-money v-model="person.BUSSESEXPENSE" type="number">
            </div>
            <div class="tips box">
              <div class="icon icon-invoice-tips"></div>
              <div class="tc-666 box-f1">
                长途交通费包括机票/火车票/自驾/轮船等
              </div>
            </div>
          </div>
          <div class="item box box-ver">
            <div>市内交通</div>
            <div class="box box-ac amount">
              <div>¥&nbsp;</div>
              <input v-auto-scroll class="box-f1" v-limit-money v-model="person.TAXIEXPENSE" type="number">
            </div>
            <div class="tips box">
              <div class="icon icon-invoice-tips"></div>
              <div class="tc-666 box-f1">
                出差地内因公产生的打车费、公共交通费用等
              </div>
            </div>
          </div>
        </div>
        <div class="invoice">
          <div class="head box box-ac">
            <div @click="selectInvoice()" class="box box-ac">
              <div class="">继续添加</div>
              <div class="icon icon-add-blue"></div>
            </div>
          </div>
          <div class="content w-p100 box box-ver box-ac box-jc">
            <div v-if="person.zsInvoice.list.length === 0" class="no-data box-ver box box-ac box-jc">
              <div @click="selectInvoice()" class="icon icon-invoice-select"></div>
              <div class="text tc-666">从发票包选择发票</div>
            </div>
            <div v-if="person.zsInvoice.list.length > 0" class="invoice-list">
              <swiper class="swiper" :options="swiperOption" ref="invoiceSwiper" @slideChange="initPencent">
                <swiper-slide v-for="(item, index) in person.zsInvoice.list" :value="item" :key="index" class="swiper-slide box box-ac box-jc">
                  <div class="invoice-item">
                    <div class="head box box-ac box-jc">
                      <div class="title tc-main">增值税{{ item.invoicetype == '01' ? '专用' : '普通' }}发票</div>
                      <div class="date">开票日期：{{item.invoicedate}}</div>
                      <div @click="deleteInvoice(index)" class="icon icon-close"></div>
                    </div>
                    <div class="invoice-content">
                      <div class="box line">
                        <div class="box box-jc box-ver box-f1 box-fh left">
                          <div>发票号码</div>
                          <div class="tc-999 txt">{{item.invoicenum}}</div>
                        </div>
                        <div class="box box-jc box-ver box-f1 box-fh right">
                          <div>发票代码</div>
                          <div class="tc-999 txt">{{item.invoicecode}}</div>
                        </div>
                      </div>
                      <div class="box line">
                        <div class="box box-jc box-ver box-f1 box-fh left">
                          <div>税率</div>
                          <div class="tc-999 txt">{{getTax(index)}}</div>
                        </div>
                        <div class="box box-jc box-ver box-f1 box-fh right">
                          <div>税额</div>
                          <div class="tc-999 txt">{{((+item.totalamount) - (+item.invoiceamount)) | formatMoney}}</div>
                        </div>
                      </div>
                      <div class="box box-ac line">
                        <span>发票金额&nbsp;&nbsp;</span>
                        <span class="tc-999 txt">¥{{item.totalamount}}</span>
                      </div>
                    </div>
                  </div>
                </swiper-slide>
              </swiper>
              <div class="num">
                {{slidePencent}}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div @click="sure()" class="btn-bot">确定</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
// import { getTravelTripStandards } from '@/assets/js/api'
// import { countDate } from '@/assets/js/common'

export default {
  name: 'caiBaoFeeJiaoTong',
  data () {
    return {
      billIndex: '',
      personIndex: '',
      person: {
        TAXIEXPENSE: '',
        BUSSESEXPENSE: '',
        CFGOBACKFLY: ''
      }
    }
  },
  computed: {
    ...mapState(['bizAccountBill']),
    total () {
      let TAXIEXPENSE = this.person.TAXIEXPENSE || 0
      let BUSSESEXPENSE = this.person.BUSSESEXPENSE || 0
      let CFGOBACKFLY = this.person.CFGOBACKFLY || 0
      let total = (+TAXIEXPENSE) + (+BUSSESEXPENSE) + (+CFGOBACKFLY)
      return total.toFixed(2)
    },
    swiper () {
      return this.$refs.invoiceSwiper.swiper
    },
    ...mapState(['bizAccountBill', 'routerAni'])
  },
  created () {
    this.billIndex = this.$route.query.billIndex
    this.personIndex = this.$route.query.personIndex
    let person = this.bizAccountBill.marchInfos[this.billIndex].travelPerson[this.personIndex]
    this.person = Object.assign({}, this.person, person)
  },
  mounted () {
  },
  methods: {
    sure () {
      this.person.jtTotal = this.total
      this.bizAccountBill.marchInfos[this.billIndex].travelPerson[this.personIndex] = this.person
      this.$store.commit('bizAccountBill', {
        marchInfos: this.bizAccountBill.marchInfos
      })
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/caiBaoFee';
.btn-bot{
  position: relative;
}
.invoice{
  background-color:#FFF;
  padding:0 .2rem;
  overflow-x: hidden;
  .head{
    color:$themeColor;
    height:.8rem;
    border-bottom:1px solid $borderColor;
  }
  .content{
    height:5.6rem;
  }
}
.icon-add-blue{
  margin-left:.1rem;
  width:.4rem;
  height:.4rem;
  @include bg-image('../assets/images/icon-add-blue');
}
.no-data{
  .icon-invoice-select{
    width:1.51rem;
    height:1.63rem;
    @include bg-image('../assets/images/icon-invoice-select')
  }
  .text{
    font-size:.26rem;
    padding-top:.2rem;
  }
}
.invoice-list{
  width:100%;
  height:4.3rem;
  position:relative;
}
.swiper-container {
  width:100%;
  height:3.6rem;
}
.swiper-slide{
  width:100%;
}
.num{
  position:absolute;
  bottom:0;
  right:.6rem;
  border-radius:.2rem;
  padding:.1rem;
  color:#FFF;
  background-color:#ddd;
}
.invoice-item{
  width:6.3rem;
  height:3.6rem;
  .head{
    width:100%;
    height:1.1rem;
    background-color:#cde3fc;
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
    position:relative;
    font-size:.34rem;
    .date{
      position:absolute;
      bottom:.05rem;
      right:.6rem;
      color:#666;
      font-size:.2rem;
    }
    .icon-close{
      position:absolute;
      right:.2rem;
      top:.37rem;
      width:.36rem;
      height:.36rem;
      @include bg-image('../assets/images/icon-person-delete');
    }
  }
  .invoice-content{
    border:1px solid $themeColor;
    .line{
      height:.8rem;
      font-size:.24rem;
      color:#666;
      padding:0 .2rem;
      border-top:1px solid $borderColor;
      &:nth-of-type(1){
        border-top:none;
      }
      .left{
        border-right:1px solid $borderColor;
      }
      .right{
        padding-left:.2rem;
      }
    }
  }
}
</style>
